<template>
  <div>
    <navigation></navigation>
    <div class="main">
      <department-list
        :list="departments"
        :allUser="allUser"
        class="department-list"
      ></department-list>
    </div>
    <div class="back-wrapper shadow rounded"></div>
  </div>
</template>

<script>
import DepartmentList from "./components/List";
import Navigation from "../../common/navigation/Navigation";
import axios from "axios";

export default {
  components: {
    Navigation,
    DepartmentList
  },
  name: "Department",
  data() {
    return {
      departments: [],
      allUser: []
    };
  },
  methods: {
    getDepartmentInfo() {
      axios.defaults.headers.common["Authorization"] = this.$store.state.token;
      axios
        .get("http://119.23.110.183:8080/getDepartments", { oid: 5 })
        .then(this.getDepartmentInfoSucc);
    },
    getDepartmentInfoSucc(res) {
      const _this = this;
      res = res.data;
      if (res.code === 0) {
        const departmentList = res.data.Departments;
        for (let i = 0; i < departmentList.length; i++) {
          if (departmentList[i].admin != null) {
            departmentList[i].admin = departmentList[i].admin.split("-");
          }
        }
        _this.departments = departmentList;
      }
      this.getAllUserInfo();
    },
    getAllUserInfo() {
      const _this = this;
      for (let i = 0; i < _this.departments.length; i++) {
        axios.defaults.headers.common[
          "Authorization"
        ] = this.$store.state.token;
        axios
          .get(
            "http://119.23.110.183:8080/getAllUserInfoByDid?did=" +
              _this.departments[i].departmentId
          )
          .then(res => {
            res = res.data;
            if (res.code === 0) {
              const data = res.data.list;
              if (data != false) {
                for (let j = 0; j < data.length; j++) {
                  _this.allUser.push(data[j]);
                }
              }
            }
          });
      }
    }
  },
  activated() {
    this.getDepartmentInfo();
  }
};
</script>

<style lang="stylus" scoped>
.main
  height 0
  width 100%
  padding 100px
  margin-left: 90px;
  margin-top px

.back-wrapper
  width 83.2%

  height 83.5%
  background-color white
  z-index -1
  position absolute
  top 85px
  left 190px
</style>
